<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>职位管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
</head>
<body>
    <div th:replace="common/header :: header"></div>

    <div class="container mt-5">
        <div class="card shadow rounded-4">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center rounded-top-4">
                <h5 class="mb-0"><i class="bi bi-briefcase"></i> 职位管理</h5>
                <button class="btn btn-success" onclick="location.href='/job/add'"><i class="bi bi-plus-circle"></i> 新增职位</button>
            </div>
            <div class="card-body">
                <!-- 搜索表单 -->
                <form class="row g-3 mb-4" method="get" action="/job/list">
                    <div class="col-md-3">
                        <input type="text" class="form-control rounded-pill" name="title" th:value="${param.title}" placeholder="职位名称">
                    </div>
                    <div class="col-md-3">
                        <select class="form-select rounded-pill" name="department">
                            <option value="">选择部门</option>
                            <option th:each="dept : ${departments}" th:value="${dept}" th:text="${dept}" th:selected="${param.department} == ${dept}"></option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select rounded-pill" name="status">
                            <option value="">选择状态</option>
                            <option value="OPEN" th:selected="${param.status} == 'OPEN'">招聘中</option>
                            <option value="CLOSED" th:selected="${param.status} == 'CLOSED'">已结束</option>
                        </select>
                    </div>
                    <div class="col-md-3 d-flex gap-2">
                        <button type="submit" class="btn btn-primary rounded-pill flex-fill"><i class="bi bi-search"></i> 搜索</button>
                        <button type="button" class="btn btn-outline-secondary rounded-pill flex-fill" onclick="resetForm()"><i class="bi bi-arrow-counterclockwise"></i> 重置</button>
                    </div>
                </form>
                <!-- 职位列表 -->
                <div class="table-responsive">
                    <table class="table table-striped table-hover align-middle rounded-3 overflow-hidden">
                        <thead class="table-light">
                            <tr>
                                <th>职位名称</th>
                                <th>部门</th>
                                <th>薪资范围</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="job : ${jobs}">
                                <td th:text="${job.title}"></td>
                                <td th:text="${job.department}"></td>
                                <td th:text="${job.salaryMin + 'K-' + job.salaryMax + 'K'}"></td>
                                <td>
                                    <span th:if="${job.status == 'OPEN'}" class="badge bg-success">招聘中</span>
                                    <span th:if="${job.status == 'CLOSED'}" class="badge bg-secondary">已结束</span>
                                    <span th:if="${job.status != 'OPEN' && job.status != 'CLOSED'}" class="badge bg-warning text-dark" th:text="${job.status}"></span>
                                </td>
                                <td th:text="${#temporals.format(job.createTime, 'yyyy-MM-dd HH:mm')}"></td>
                                <td>
                                    <button class="btn btn-sm btn-info me-1" th:onclick="'viewJob(' + ${job.id} + ')'">
                                        <i class="bi bi-eye"></i> 查看
                                    </button>
                                    <a class="btn btn-sm btn-primary me-1" th:href="@{'/job/edit/' + ${job.id}}">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <button class="btn btn-sm btn-danger" th:onclick="'deleteJob(' + ${job.id} + ')'">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- 分页 -->
                <nav th:if="${totalPages > 1}">
                    <ul class="pagination justify-content-center">
                        <li class="page-item" th:classappend="${currentPage == 1} ? 'disabled'">
                            <a class="page-link" th:href="@{/job/list(page=${currentPage - 1})}">上一页</a>
                        </li>
                        <li class="page-item" th:each="i : ${#numbers.sequence(1, totalPages)}" th:classappend="${i == currentPage} ? 'active'">
                            <a class="page-link" th:href="@{/job/list(page=${i})}" th:text="${i}"></a>
                        </li>
                        <li class="page-item" th:classappend="${currentPage == totalPages} ? 'disabled'">
                            <a class="page-link" th:href="@{/job/list(page=${currentPage + 1})}">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 职位详情模态框 -->
    <div class="modal fade" id="jobDetailModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">职位详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">职位名称</label>
                            <p id="detailTitle" class="form-control-plaintext"></p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">部门</label>
                            <p id="detailDepartment" class="form-control-plaintext"></p>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">薪资范围</label>
                            <p id="detailSalary" class="form-control-plaintext"></p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">状态</label>
                            <p id="detailStatus" class="form-control-plaintext"></p>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">职位描述</label>
                        <p id="detailDescription" class="form-control-plaintext"></p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">任职要求</label>
                        <p id="detailRequirements" class="form-control-plaintext"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 查看职位详情
        function viewJob(id) {
            axios.get('/job/' + id)
                .then(response => {
                    const job = response.data;
                    document.getElementById('detailTitle').textContent = job.title || '';
                    document.getElementById('detailDepartment').textContent = job.department || '';
                    document.getElementById('detailSalary').textContent = (job.salaryMin || '') + 'K-' + (job.salaryMax || '') + 'K';
                    document.getElementById('detailStatus').textContent = job.status === 'OPEN' ? '招聘中' : (job.status === 'CLOSED' ? '已结束' : job.status);
                    document.getElementById('detailDescription').textContent = job.description || '';
                    document.getElementById('detailRequirements').textContent = job.requirements || '';
                    new bootstrap.Modal(document.getElementById('jobDetailModal')).show();
                })
                .catch(error => {
                    console.error('获取职位详情失败:', error);
                    alert('获取职位详情失败');
                });
        }

        // 编辑职位
        function editJob(id) {
            location.href = '/job/edit/' + id;
        }

        // 删除职位
        function deleteJob(id) {
            if (confirm('确定要删除这个职位吗？')) {
                axios.post('/job/delete/' + id)
                    .then(response => {
                        if (response.data === 'success') {
                            alert('删除成功');
                            location.reload();
                        } else {
                            alert('删除失败');
                        }
                    })
                    .catch(error => {
                        alert('删除失败：' + error.message);
                    });
            }
        }

        // 重置搜索表单
        function resetForm() {
            document.querySelector('form').reset();
            location.href = '/job/list';
        }
    </script>
</body>
</html> 